<div class="container nga-container-layout">
  <div class="nga-container-sidebar">
    <ul class="list-unstyled p-2">
      <li class="mb-1">
        <button class="btn nga-btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse"
          data-bs-target="#home-collapse" aria-expanded="false">
          Components
        </button>
        <div class="collapse" id="home-collapse">
          <ul class="nga-btn-toggle-nav list-unstyled fw-normal pb-1 small">
            <li>
              <a routerLink="/bootstrap/alerts" class="link-dark rounded"><i
                  class="fas fa-user text-primary mt-1 me-2"></i>Alerts</a>
            </li>
            <li>
              <a routerLink="/bootstrap/badges" class="link-dark rounded"><i
                  class="fas fa-user-friends text-primary mt-1 me-2"></i>Badges</a>
            </li>
            <li>
              <a routerLink="/bootstrap/blockquotes" class="link-dark rounded"><i
                  class="fas fa-house-user text-primary mt-1 me-2"></i>Blockquotes</a>
            </li>
            <li>
              <a routerLink="/bootstrap/cards" class="link-dark rounded"><i
                  class="fab fa-asymmetrik text-primary mt-1 me-2"></i>Cards</a>
            </li>
            <li>
              <a routerLink="/bootstrap/collapse" class="link-dark rounded"><i
                  class="fas fa-balance-scale-right text-primary mt-1 me-2"></i>Collapse</a>
            </li>
            <li>
              <a routerLink="/bootstrap/dropdowns" class="link-dark rounded"><i
                  class="fas fa-bahai text-primary mt-1 me-2"></i>Dropdowns</a>
            </li>
            <li>
              <a routerLink="/bootstrap/list-group" class="link-dark rounded"><i
                  class="fab fa-battle-net text-primary mt-1 me-2"></i>List-group</a>
            </li>
            <li>
              <a routerLink="/bootstrap/modal" class="link-dark rounded"><i
                  class="fab fa-canadian-maple-leaf text-primary mt-1 me-2"></i>Modal</a>
            </li>
            <li>
              <a routerLink="/bootstrap/toasts" class="link-dark rounded"><i
                  class="fas fa-cogs text-primary mt-1 me-2"></i>Toasts</a>
            </li>
            <li>
              <a routerLink="/bootstrap/tooltips" class="link-dark rounded"><i
                  class="fab fa-edge text-primary mt-1 me-2"></i>Tooltips</a>
            </li>
          </ul>
        </div>
      </li>
      <li class="mb-1">
        <button class="btn nga-btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse"
          data-bs-target="#orders-collapse" aria-expanded="false">
          Forms
        </button>
        <div class="collapse" id="orders-collapse">
          <ul class="nga-btn-toggle-nav list-unstyled fw-normal pb-1 small">
            <li>
              <a routerLink="/bootstrap/buttons" class="link-dark rounded">
                <i class="fab fa-artstation text-primary mt-1 me-2"></i>Buttons</a>
            </li>
            <li>
              <a routerLink="/bootstrap/checkbox" class="link-dark rounded">
                <i class="fas fa-atom text-primary mt-1 me-2"></i>Checkbox</a>
            </li>
            <li>
              <a routerLink="/bootstrap/forms" class="link-dark rounded">
                <i class="fas fa-basketball-ball text-primary mt-1 me-2"></i>Forms</a>
            </li>
            <li>
              <a routerLink="/bootstrap/pagination" class="link-dark rounded">
                <i class="far fa-address-card text-primary mt-1 me-2"></i>Pagination</a>
            </li>
            <li>
              <a routerLink="/bootstrap/tables" class="link-dark rounded">
                <i class="fas fa-chart-line text-primary mt-1 me-2"></i>Tables</a>
            </li>
          </ul>
        </div>
      </li>
      <li class="border-top my-3"></li>
      <li class="mb-1">
        <button class="btn nga-btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse"
          data-bs-target="#account-collapse" aria-expanded="false">
          Extra
        </button>
        <div class="collapse" id="account-collapse">
          <ul class="nga-btn-toggle-nav list-unstyled fw-normal pb-1 small">
            <li>
              <a routerLink="/bootstrap/accordions" class="link-dark rounded">
                <i class="far fa-address-card text-primary mt-1 me-2"></i>Accordions</a>
            </li>
            <li>
              <a routerLink="/bootstrap/breadcrumb" class="link-dark rounded">
                <i class="fab fa-app-store text-primary mt-1 me-2"></i>Breadcrumb</a>
            </li>
            <li>
              <a routerLink="/bootstrap/popovers" class="link-dark rounded">
                <i class="fab fa-jedi-order text-primary mt-1 me-2"></i>Popovers</a>
            </li>
            <li>
              <a routerLink="/bootstrap/progress" class="link-dark rounded">
                <i class="fab fa-galactic-republic text-primary mt-1 me-2"></i>Progress</a>
            </li>
            <li>
              <a routerLink="/bootstrap/spinners" class="link-dark rounded">
                <i class="fab fa-empire text-primary mt-1 me-2"></i>Spinners</a>
            </li>
            <li>
              <a routerLink="/bootstrap/typography" class="link-dark rounded">
                <i class="fas fa-dove text-primary mt-1 me-2"></i>Typography</a>
            </li>
          </ul>
        </div>
      </li>
    </ul>
  </div>

  <div class="row">
    <div class="col p-4">
      <router-outlet></router-outlet>
    </div>
  </div>

</div>